<template>
	<view class="content">
		<view class="mainpadding ffffff">
			<view class="flexleft">
				<view class="color_san text_x" style="margin-right: 80rpx;">
					收貨人
				</view>
				<view class="inputBox">
					<input class="text_a" type="text" placeholder="請輸入收貨人姓名"
						placeholder-style="font-size: 30rpx;font-weight: 500;color: #999999;" v-model="name">
				</view>
			</view>
			<view class="flexleft">
				<view class="color_san text_x margin_right6">
					手機號碼
				</view>
				<view class="inputBox">
					<input class="text_a" type="text" placeholder="請輸入手機號碼"
						placeholder-style="font-size: 30rpx;font-weight: 500;color: #999999;" v-model="phone">
				</view>
			</view>
			<view class="flexleft">
				<view class="color_san text_x margin_right6">
					選擇區域
				</view>
				<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="請選擇住址" popup-title="請選擇地區"
					v-model="addressinfo.county" class="inputBox">
					<text class="inputs1 text_g color_jiu" v-if="!area.length">選擇省、市、區</text>
					<text class="inputs1" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
				</uni-data-picker>
			</view>
			<view class="flexleft">
				<view class="color_san text_x margin_right6">
					詳細地址
				</view>
				<view class="inputBox">
					<input class="text_a" type="text" placeholder="請輸入詳細地址"
						placeholder-style="font-size: 30rpx;font-weight: 500;color: #999999;" v-model="address">
				</view>
			</view>
			<view class="flexbetween margin_top2">
				<view class="color_san text_x margin_right6">
					設置默認地址
				</view>
				<view>
					<u-switch inactiveColor="rgb(230, 230, 230)" space="2" v-model="is_default" activeColor="rgba(255, 184, 0, 1)"
						>
					</u-switch>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer">
			<view class="footerButton" @click="addaddress">保存</view>
		</view>
	</view>
</template>

<script>
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				is_default: false,
				area: [],
				addressinfo: {
					province: "", //省
					city: "", //市
					county: "", //區
				},
				items: citys.data,
				address: "",
				latitude: "34.747201",
				longitude: "113.625000",
				name: "",
				phone: "",
				googleKey:""
			}
		},
		async onLoad(options) {
			this.listid = options.id;
			// await this.getsystem()
			if (this.listid) {
				uni.setNavigationBarTitle({
					title: "編輯收貨地址"
				});
				this.getDetail()
			} else {
				uni.setNavigationBarTitle({
					title: "新增收貨地址"
				});
				await this.getlocation()
			}
		},
		methods: {
			async getsystem(){
				let res = await this.http.request('/api/index/getConfigInfoItem', 'GET', {
					pidtype:"gooleset",
					type:"google_key"
				})
				this.googleKey = res.data
				console.log(123);
			},
			getlocation() {
				let that = this
				navigator.geolocation.getCurrentPosition(function(position) {
					let postData = {
						latlng: position.coords.latitude + "," + position.coords.longitude,
						key: that.googleKey
					}
					that.http.request('/api/index/getLocationInfo', 'GET', {
						latlng:postData.latlng,
					}).then(res=>{
						that.address = res.data.results[0].formatted_address
						that.latitude = position.coords.latitude
						that.longitude = position.coords.longitude
						console.log(res, "google定位接口請求成功");
					})
					// uni.request({
					// 	url: "https://maps.googleapis.com/maps/api/geocode/json",
					// 	data: postData,
					// 	method: 'GET', //'GET','POST'
					// 	dataType: 'json',
					// 	success: (res) => {
					// 		that.address = res.data.results[0].formatted_address
					// 		that.latitude = position.coords.latitude
					// 		that.longitude = position.coords.longitude
					// 		console.log(res, "google定位接口請求成功");
					// 	},
					// 	fail: (res) => {
					// 		console.log(res, "google接口請求失敗");
					// 	}
					// })
				});
			},
			checkaddress() {
				let _this = this
				uni.chooseLocation({
					success: function(response) {
						_this.address = response.address
						_this.latitude = response.latitude
						_this.longitude = response.longitude
					},
					fail(res) {
						console.log(res, "失敗了");
					}
				})
			},
			getDetail(){
				this.http.request('/api/member/deailAddre', 'POST', {
					id: this.listid
				}).then(res => {
					this.name = res.data.name
					this.phone = res.data.phone
					this.area = res.data.addre.split("/")
					this.address = res.data.address
					this.is_default= res.data.is_on==1?true:false
					this.latitude = res.data.latitude
					this.longitude = res.data.longitude
					// this.addressinfo = {
					// 	province: res.data.province, //省
					// 	city: res.data.city, //市
					// 	county: res.data.district, //區
					// }
				})
			},
			isphone(value) { //手機號校驗
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			addaddress() { //添加地址
				uni.showLoading({
					title: '請稍候...',
					mask: true
				})
				let _this = this;
				let phone = _this.phone;
				if (_this.name == '') {
					uni.hideLoading()
					this.http.toast('請輸入收貨人名字');
					return false;
				}
				if (_this.phone == "") {
					uni.hideLoading()
					this.http.toast('請輸入收貨人手機號');
					return false;
				}
				
				if (!_this.area.length) {
					uni.hideLoading()
					this.http.toast('請選擇地址');
					return false;
				}
				if (_this.address == false) {
					uni.hideLoading()
					this.http.toast('請輸入詳細地址');
					return false;
				}
				let url="/api/member/editAddre"
				let data = {
					id: this.listid,
					name: _this.name,
					phone: _this.phone,
					addre:`${this.area[0]}/${this.area[1]}/${this.area[2]}`,
					address: _this.address,
					is_on: _this.is_default ? 1 : 0,
					latitude:this.latitude,
					longitude:this.longitude,
					// province: _this.addressinfo.province,
					// city: _this.addressinfo.city,
					// district: _this.addressinfo.county,
					// region:this.area.join("/")
				}
				if (!_this.listid) {
					url="/api/member/addAddre"
					delete data.id
				}
				this.http.request(url, 'POST', data, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.http.toast("保存成功！")
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}else{
						this.http.toast(res.msg)
					}
				})
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.addressinfo.province = area[0].text;
				this.addressinfo.city = area[1].text;
				this.addressinfo.county = area[2].text;
				// this.addressinfo.province = area[0].value;
				// this.addressinfo.city = area[1].value;
				// this.addressinfo.county = area[2].value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inputBox {
		padding: 20rpx 0;
		border-bottom: 2rpx solid #F1F1F1;
		flex: 1;
		// margin-left: 60rpx;
	}
</style>